<template xmlns="http://www.w3.org/1999/html">
  <div class="app-container">
    <!-- 左边 -->
      <div class="video-center">
          <div class="center-box1">
                <div class="put">
                  <el-input placeholder="请输入摄像头ip" v-model="poolNum" @change="getRobotName($event)"
                        prefix-icon="el-icon-search" clearable></el-input>
                </div>
                <!-- 机器人选择 -->
                <div class="table">
                  <el-table :data="CameraList" @row-click="handleSelectionChange" height="100%"
                        :class="[isDologin ? 'scrollbarShow' : 'commonScrollbarTable']"
                        :header-cell-style="{ width: '100%', background: '#0d1f4e', color: '#bdbdc2', fontSize: '14px', 'text-align': 'left' }"
                        :row-style="{ height: '50px', width: '100%', fontSize: '14px', color: '#bdbdc2', 'text-align': 'left' }"
                        :cell-style="{ padding: '0px', width: '100%', 'text-align': 'left' }">
                    <el-table-column prop="ip" label="摄像头IP" width="90px"></el-table-column>
                    <el-table-column prop="poolNum" label="管廊编号" width="70px">
                       <template slot-scope="scope">
                          <span>{{ scope.row.poolNum }}管廊</span>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
          </div>
      </div>
    <!-- 右边 -->
    <div class="video-right">
      <!-- 海康摄像头 -->
      <div class="videoBox">
        <div class="videobox1">
          <div style="display: flex;justify-content: center;align-items: center;">
              <p id="robotitle" style="font-size:18px;color: #e7e7ea;letter-spacing:1px;"></p>
          </div>
          <!-- 监控画面 -->
          <div class="box">
            <video v-show="videoShow" style="width:100%;height:98%"  class="video-js" id="videoGL" controls></video>
          </div>
        </div>
        <div class="videobox3">
          <!-- 云台 -->
          <div class="ytkz">
            <div class="videobox3-1">
              <p>云台控制</p>
              <span></span>
            </div>
            <div class="videobox3-2">
              <!-- 八角云盘 -->
              <div class="ptz">
                <!-- /* 外圆环 */ -->
                <div id="round"></div>
                <!-- /* 黑色内圆环 */ -->
                <div id="center_black"></div>
                <div id="center_blue" @click="HKpicture">
                  <span>抓图</span>
                </div>
                <div id="circle0">
                  <div id="left">
                    <div class="circle-left" id="circle2" @click="startUp" @mousedown="startUp1" @mouseup="stopUp1">
                      <span>上</span>
                    </div>
                    <div class="circle-left" id="circle3" @click="startUpRight" @mousedown="startUpRight1"
                      @mouseup="stopUpRight1">
                      <span>右上</span>
                    </div>
                    <div class="circle-left" id="circle4" @click="startRight" @mousedown="startRight1"
                      @mouseup="stopRight1">
                      <span>右</span>
                    </div>
                    <div class="circle-left" id="circle5" @click="startDownRight" @mousedown="startDownRight1"
                      @mouseup="stopDownRight1">
                      <span>右下</span>
                    </div>
                  </div>
                  <div id="right">
                    <div class="circle-right" id="circle9" @click="startUpLeft" @mousedown="startUpLeft1"
                      @mouseup="stopUpLeft1">
                      <span>左上</span>
                    </div>
                    <div class="circle-right" id="circle8" @click="startLeft" @mousedown="startLeft1" @mouseup="stopLeft1">
                      <span>左</span>
                    </div>
                    <div class="circle-right" id="circle7" @click="startDownLeft" @mousedown="startDownLeft1"
                      @mouseup="stopDownLeft1">
                      <span>左下</span>
                    </div>
                    <div class="circle-right" id="circle6" @click="startDown" @mousedown="startDown1" @mouseup="stopDown1">
                      <span>下</span>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 变倍 -->
              <div class="videobox3-3">
                <div class="videobox3-3-1">
                  <p class="btn1" @click="startBBminus" @mousedown="startBBminus1" @mouseup="stopBBminus1"><i
                      class="el-icon-minus"></i></p>
                  <p>变倍</p>
                  <p class="btn2" @click="startBBplus" @mousedown="startBBplus1" @mouseup="stopBBplus1"><i
                      class="el-icon-plus"></i></p>
                </div>
                <div class="videobox3-3-1">
                  <p class="btn1" @click="startBJminus" @mousedown="startBJminus1" @mouseup="stopBJminus1"><i
                      class="el-icon-minus"></i></p>
                  <p>变焦</p>
                  <p class="btn2" @click="startBJplus" @mousedown="startBJplus1" @mouseup="stopBJplus1"><i
                      class="el-icon-plus"></i></p>
                </div>
                <div class="videobox3-3-1">
                  <p class="btn1" @click="startGQminus" @mousedown="startGQminus1" @mouseup="stopGQminus1"><i
                      class="el-icon-minus"></i></p>
                  <p>光圈</p>
                  <p class="btn2" @click="startGQplus" @mousedown="startGQplus1" @mouseup="stopGQplus1"><i
                      class="el-icon-plus"></i></p>
                </div>
              </div>
            </div>
          </div>
          <!-- 音频控制 -->
          <div class="ypkz">
<!--              <div class="yspkz">
              <p>音视频</p>
              <span></span>
            </div>-->
            <div class="btnBox">
              <div class="btnBox1">
                <el-button class="btn" size="mini" @click="HKtiming">校时</el-button>
                <p contenteditable="true" id="sy"></p>
              </div>
              <div class="btnBox2">
                <el-button class="btn1" size="default" v-show="lxShow">离线</el-button>
                <el-button class="btn3" size="default" v-show="zxShow">在线</el-button>
                <el-button class="btn2" size="default" @click="HKwatermark">水印</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import $ from "jquery";
// 引入flvjs
import flvjs from 'flv.js';
import FlvExtend from 'flv-extend';
import {
  HKfocusAdd,
  HKfocusAdd1,
  HKfocusAddEnd1,
  HKfocusDec,
  HKfocusDec1,
  HKfocusDecEnd1,
  HKirisAdd,
  HKirisAdd1,
  HKirisAddEnd1,
  HKirisDec,
  HKirisDec1,
  HKirisDecEnd1,
  HKonline,
  HKpicture,
  HKptzDown,
  HKptzDown1,
  HKptzDownEnd1,
  HKptzLeft,
  HKptzLeft1,
  HKptzLeftDown,
  HKptzLeftDown1,
  HKptzLeftDownEnd1,
  HKptzLeftEnd1,
  HKptzLeftUp,
  HKptzLeftUp1,
  HKptzLeftUpEnd1,
  HKptzRight,
  HKptzRight1,
  HKptzRightDown,
  HKptzRightDown1,
  HKptzRightDownEnd1,
  HKptzRightEnd1,
  HKptzRightUp,
  HKptzRightUp1,
  HKptzRightUpEnd1,
  HKptzUp,
  HKptzUp1,
  HKptzUpEnd1,
  HKtiming,
  HKwatermark,
  HKzoomAdd,
  HKzoomAdd1,
  HKzoomAddEnd1,
  HKzoomDec,
  HKzoomDec1,
  HKzoomDecEnd1,
  flvVideo,
  flvStop
} from "@/api/nssc/guanlang/guanlang";
import { ippingCmd} from "@/api/nssc/home/home";
import {listConfig} from "@/api/nssc/guanlang/guanlang"
export default {
  data() {
    return {
      //管廊机器人列表
      CameraList:[],
      directions: 'rtl',
      //是否展示视频画面
      videoShow: false,
      //判断展示在线或离线
      zxShow: false,
      lxShow: true,
      result: [],
      //控制机器人的滚动条
      isDologin: false,
      poolNum:'', //管廊编号
      //机器人数据
      robot: {},
      count: 0,
      //控制模式板块的切换(表示默认显示第一个内容)
      selectedTab: 0,
      //摄像头服务
      webRtcServer: null,
      queryParams: {
        ip: undefined //管廊摄像头ip
      },
      //摄像头参数
      queryparms4: {
        //valu: undefined,
        ip: localStorage.getItem("ip"),
        port: localStorage.getItem("port"),
        user: localStorage.getItem("user"),
        psw: localStorage.getItem("psw"),
      },//在线或离线
      online: '',
      timer: null,//定时器
      timer1: null,//定时器
      rtspUrl:'', //rtsp视频流地址
      flvUrl:null,//请求回来的flv视频流地址
      flvPlayer: null
    }
  },
  created() {
    //初始化页面加载方法
    this.getList();//管廊列表
  },
  mounted() {
    //机器人标题
    $("#robotitle").text(localStorage.getItem("poolNum") == null ? "管廊" : localStorage.getItem("poolNum") + "管廊监控");
    this.timer1 = setInterval(() => {
      this.getList();//管廊列表
    }, 2000);//2秒
    this.HKonlines(); //摄像头在线离线状态
    //判断ip是否通
    if(localStorage.getItem("ip") != null && localStorage.getItem("ip") != ""){
        this.stopFlvVideo() //停止flv流
        ippingCmd(localStorage.getItem("ip")).then(response =>{
          if(typeof (response)!= null && response.data != null && response.data == true ) {
                this.flvSpbf();
          }else{
            console.log("摄像头ip:" + localStorage.getItem("ip") + "ping不通" )
          }
        })
      }else{
        console.log("摄像头ip:"+localStorage.getItem("ip")+"为空！")
    }
  },
  methods: {
    //根据输入框管廊编号，查询
    getRobotName(ip) {
      this.queryParams.ip = ip;
      this.getList();
    },
    //获取当前机器人数据
    handleSelectionChange(row) {
      localStorage.removeItem("ip");
      localStorage.removeItem("port");
      localStorage.removeItem("user");
      localStorage.removeItem("psw");
      localStorage.removeItem("poolNum");//删除机器人名称
      localStorage.setItem("ip", row.ip);//存储值
      localStorage.setItem("port", row.port);//存储值
      localStorage.setItem("user", row.user);//存储值
      localStorage.setItem("psw", row.psw);//存储值
      localStorage.setItem("poolNum", row.poolNum);//存储值

      //摄像头参数
      this.queryparms4.ip = localStorage.getItem("ip");
      this.queryparms4.port = localStorage.getItem("port");
      this.queryparms4.user = localStorage.getItem("user");
      this.queryparms4.psw = localStorage.getItem("psw");

      //机器人名称标题
      $("#robotitle").text(localStorage.getItem("poolNum")+"管廊监控") ;

      this.HKonlines(); //摄像头在线离线状态
      //if (this.flvPlayer) {
          //this.flvPlayer.destroy(); // 销毁现有的播放器实例
     // }
      //判断ip是否通
      if(localStorage.getItem("ip") != null && localStorage.getItem("ip") != ""){
        this.stopFlvVideo() //停止flv流
        ippingCmd(localStorage.getItem("ip")).then(response =>{
          if(typeof (response)!= null && response.data != null && response.data == true ){
           if(this.flvPlayer != null){this.flvPlayer.destroy();this.flvPlayer = null;}
            this.flvSpbf();
          }else{
            console.log("摄像头ip:" + localStorage.getItem("ip") + "ping不通" )
          }
        })
      }else{
        console.log("摄像头ip:"+localStorage.getItem("ip")+"为空！")
      }
    },
    //flv视频
    flvSpbf(){
      const rtspUrl = {
        rtspUrl : 'rtsp://' + this.queryparms4.user + ':' + this.queryparms4.psw + '@' + this.queryparms4.ip + ':' + 554 + '/h264/ch1/main/av_stream'
      }
      flvVideo( rtspUrl ).then(response => {
        this.flvUrl = response.data
        this.createFlvPlayer(response.data);
      })
    },
    //播放flv 的固定代码
         createFlvPlayer(flvUrl) {
           // 根据FLV URL创建播放器实例
           if (flvjs.isSupported()) {
            const videoElementH = document.getElementById('videoGL')
            if (videoElementH) {
              // 配置需要的功能
              this.flvPlayer  = new FlvExtend({
                element: videoElementH, // *必传
                frameTracking: true, // 开启追帧设置
                updateOnStart: true, // 点击播放后更新视频
                updateOnFocus: true, // 获得焦点后更新视频
                reconnect: true, // 开启断流重连
                reconnectInterval: 0 // 断流重连间隔
              })
              // 调用 init 方法初始化视频
              // init 方法的参数与 flvjs.createPlayer 相同，并返回 flvjs.player 实例
              const player = this.flvPlayer.init(
                {
                  type: 'flv',
                  url: flvUrl,
                  isLive: true
                },
                {
                  enableStashBuffer: false, // 如果您需要实时（最小延迟）来进行实时流播放，则设置为false
                  autoCleanupSourceBuffer: true, // 对SourceBuffer进行自动清理
                  stashInitialSize: 128, // 减少首帧显示等待时长
                  enableWorker: true // 启用分离的线程进行转换
                }
              )
              // 直接调用play即可播放
              player.play()
            }
          }
        },//停止flv视频流
        stopFlvVideo(){
          flvStop().then(response=>{})
        },
    //管廊摄像头列表
    getList() {
      this.loading = true;
      listConfig(this.queryParams).then(response => {
        this.CameraList = response.rows;
        this.loading = false;
      });
    },
    //摄像头在线或离线状态
    HKonlines() {
      if (localStorage.getItem("ip") != null
        && localStorage.getItem("port") != null
        && localStorage.getItem("user") != null
        && localStorage.getItem("psw") != null
      ) {
        HKonline(this.queryparms4).then(response => {
           this.online = response.data[0].hKloginValue
          //判断是否展示视频
          if (this.online != -1) {
            this.videoShow = true  //摄像头在线则展示视频画面
            this.zxShow = true
            this.lxShow = false
          } else {
            this.videoShow = false  //摄像头不在线则不展示视频画面
            this.zxShow = false
            this.lxShow = true
          }
        });
      } else {
        this.$modal.msg("管廊摄像头账号为空")
        this.videoShow = false //账号为空则不展示视频画面
        this.zxShow = false
        this.lxShow = true
      }
    },
    /////////////////////海康摄像头//////////////////
    //校时
    HKtiming() {
      HKtiming(this.queryparms4).then(response => {
        if (typeof (response) != null)
          this.$modal.msg(response.msg);
      });
    },//水印
    HKwatermark() {
      this.queryparms4.valu = $("#sy").text()
      const value = this.queryparms4.valu
      if (value === '') {
        this.$modal.msg('摄像头水印不能为空')
      } else {
        HKwatermark(this.queryparms4).then(response => {
          if (typeof (response) != null) {
            this.$modal.msg(response.msg);
          }
        });
      }
    },//拍照
    HKpicture() {
      HKpicture(this.queryparms4).then(response => {
        if (typeof (response) != null) {
          this.$modal.msg(response.msg);
        }
      });
    },//云台向上点击
    startUp: _.throttle(function (event) {
      if (this.mousupTime - this.mousdownTime < 1050) {
        HKptzUp(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else { }
        });
      }
    }, 1000),
    //云台向上----长按
    startUp1() {
      this.mousdownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HKptzUp1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
          //console.log("88888", queryparms1)
        });
      }, 500)
    },
    stopUp1() {
      this.mousupTime = new Date().getTime()
      clearInterval(this.timer)
      HKptzUpEnd1(this.queryparms4).then(response => {
      });
    },//云台向下点击
    startDown: _.throttle(function (event) {
      if (this.mousupTime - this.mousdownTime < 1050) {
        HKptzDown(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else { }
        });
      }
    }, 1000),
    //云台向下----长按
    startDown1() {
      this.mousdownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HKptzDown1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopDown1() {
      this.mousupTime = new Date().getTime()
      clearInterval(this.timer)
      HKptzDownEnd1(this.queryparms4).then(response => {
        if (typeof (response) != null) {
          // this.$modal.msg(response.msg);
        }
      });
    }, //云台向左点击
    startLeft: _.throttle(function (event) {
      if (this.mousupTime - this.mousdownTime < 1050) {
        HKptzLeft(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else { }
        });
      }
    }, 1000),
    //云台向左----长按
    startLeft1() {
      this.mousdownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HKptzLeft1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopLeft1() {
      this.mousupTime = new Date().getTime()
      clearInterval(this.timer)
      HKptzLeftEnd1(this.queryparms4).then(response => {
        if (typeof (response) != null) {
          // this.$modal.msg(response.msg);
        }
      });
    },//云台向右点击
    startRight: _.throttle(function (event) {
      if (this.mousupTime - this.mousdownTime < 1050) {
        HKptzRight(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else { }
        });
      }
    }, 1000),
    //云台向右----长按
    startRight1() {
      this.mousdownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HKptzRight1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopRight1() {
      this.mousupTime = new Date().getTime()
      clearInterval(this.timer)
      HKptzRightEnd1(this.queryparms4).then(response => {
        if (typeof (response) != null) {
          // this.$modal.msg(response.msg);
        }
      });
    },//云台向左上点击
    startUpLeft: _.throttle(function (event) {
      if (this.mousupTime - this.mousdownTime < 1050) {
        HKptzLeftUp(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else { }
        });
      }
    }, 1000),
    //云台向左上----长按
    startUpLeft1() {
      this.mousdownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HKptzLeftUp1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopUpLeft1() {
      this.mousupTime = new Date().getTime()
      clearInterval(this.timer)
      HKptzLeftUpEnd1(this.queryparms4).then(response => {
        if (typeof (response) != null) {
          // this.$modal.msg(response.msg);
        }
      });
    },//云台向右上点击
    startUpRight: _.throttle(function (event) {
      if (this.mousupTime - this.mousdownTime < 1050) {
        HKptzRightUp(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else { }
        });
      }
    }, 1000),
    //云台向右上----长按
    startUpRight1() {
      this.mousdownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HKptzRightUp1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopUpRight1() {
      this.mousupTime = new Date().getTime()
      clearInterval(this.timer)
      HKptzRightUpEnd1(this.queryparms4).then(response => {
        if (typeof (response) != null) {
          // this.$modal.msg(response.msg);
        }
      });
    },//云台向左下点击
    startDownLeft: _.throttle(function (event) {
      if (this.mousupTime - this.mousdownTime < 1050) {
        HKptzLeftDown(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else { }
        });
      }
    }, 1000),
    //云台向左下----长按
    startDownLeft1() {
      this.mousdownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HKptzLeftDown1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopDownLeft1() {
      this.mousupTime = new Date().getTime()
      clearInterval(this.timer)
      HKptzLeftDownEnd1(this.queryparms4).then(response => {
        if (typeof (response) != null) {
          // this.$modal.msg(response.msg);
        }
      });
    },//云台向右下点击
    startDownRight: _.throttle(function (event) {
      if (this.mousupTime - this.mousdownTime < 1050) {
        HKptzRightDown(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else { }
        });
      }
    }, 1000),
    //云台向右下----长按
    startDownRight1() {
      this.mousdownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HKptzRightDown1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopDownRight1() {
      this.mousupTime = new Date().getTime()
      clearInterval(this.timer)
      HKptzRightDownEnd1(this.queryparms4).then(response => {
        if (typeof (response) != null) {
          // this.$modal.msg(response.msg);
        }
      });
    },//云台变倍+点击
    startBBplus: _.throttle(function (event) {
      if (this.mousupTime - this.mousdownTime < 1050) {
        HKzoomAdd(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else { }
        });
      }
    }, 1000),
    //云台变倍+  --  长按
    startBBplus1() {
      this.mousdownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HKzoomAdd1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopBBplus1() {
      this.mousupTime = new Date().getTime()
      clearInterval(this.timer)
      HKzoomAddEnd1(this.queryparms4).then(response => {
        if (typeof (response) != null) {
          // this.$modal.msg(response.msg);
        }
      });
    },//云台变倍-点击
    startBBminus: _.throttle(function (event) {
      if (this.mousupTime - this.mousdownTime < 1050) {
        HKzoomDec(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else { }
        });
      }
    }, 1000),
    //云台变倍-  --  长按
    startBBminus1() {
      this.mousdownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HKzoomDec1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopBBminus1() {
      this.mousupTime = new Date().getTime()
      clearInterval(this.timer)
      HKzoomDecEnd1(this.queryparms4).then(response => {
        if (typeof (response) != null) {
          // this.$modal.msg(response.msg);
        }
      });
    },//云台变焦+点击
    startBJplus: _.throttle(function (event) {
      if (this.mousupTime - this.mousdownTime < 1050) {
        HKfocusAdd(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else { }
        });
      }
    }, 1000),
    //云台变焦+  --  长按
    startBJplus1() {
      this.mousdownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HKfocusAdd1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopBJplus1() {
      this.mousupTime = new Date().getTime()
      clearInterval(this.timer)
      HKfocusAddEnd1(this.queryparms4).then(response => {
        if (typeof (response) != null) {
          // this.$modal.msg(response.msg);
        }
      });
    },//云台变焦-点击
    startBJminus: _.throttle(function (event) {
      if (this.mousupTime - this.mousdownTime < 1050) {
        HKfocusDec(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else { }
        });
      }
    }, 1000),
    //云台变焦-  --  长按
    startBJminus1() {
      this.mousdownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HKfocusDec1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopBJminus1() {
      this.mousupTime = new Date().getTime()
      clearInterval(this.timer)
      HKfocusDecEnd1(this.queryparms4).then(response => {
        if (typeof (response) != null) {
          // this.$modal.msg(response.msg);
        }
      });
    },
    //云台光圈+ 点击
    startGQplus: _.throttle(function (event) {
      if (this.mousupTime - this.mousdownTime < 1050) {
        HKirisAdd(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else { }
        });
      }
    }, 1000),
    //云台光圈+ --  长按
    startGQplus1() {
      this.mousdownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HKirisAdd1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopGQplus1() {
      this.mousupTime = new Date().getTime()
      clearInterval(this.timer)
      HKirisAddEnd1(this.queryparms4).then(response => {
        if (typeof (response) != null) {
          // this.$modal.msg(response.msg);
        }
      });
    },//云台光圈- 点击
    startGQminus: _.throttle(function (event) {
      if (this.mousupTime - this.mousdownTime < 1050) {
        HKirisDec(this.queryparms4).then(response => {
          if (response.msg != null) {
            this.$modal.msg(response.msg);
          } else { }
        });
      }
    }, 1000),
    //云台光圈- --  长按
    startGQminus1() {
      this.mousdownTime = new Date().getTime()
      this.timer = setInterval(() => {
        HKirisDec1(this.queryparms4).then(response => {
          // if (typeof (response) != null) {
          //   this.$modal.msg(response.msg);
          // }
        });
      }, 500)
    },
    stopGQminus1() {
      this.mousupTime = new Date().getTime()
      clearInterval(this.timer)
      HKirisDecEnd1(this.queryparms4).then(response => {
        if (typeof (response) != null) {
          // this.$modal.msg(response.msg);
        }
      });
    },
  },
  beforeDestroy() {
     if(this.rtspUrl != null||this.rtspUrl != ""){this.rtspUrl = "";}
        if(this.flvPlayer != null){this.flvPlayer.destroy();this.flvPlayer = null;}
        this.stopFlvVideo() //停止供流
    //清除定时器
    if (this.timer) {
      clearInterval(this.timer); //关闭
    }
    if (this.timer1) {
      clearInterval(this.timer1); //关闭
    }
  }, enter() {
    this.isDologin = true;
  }, leave() {
    this.isDologin = false;
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: calc(100vh - 40px);
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #011137 !important;
}

* {
  margin: 0;
  padding: 0;
}

.el-button+.el-button {
  margin-left: 0px;
}

//左边
.video-center {
  width: 20%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #011137 !important;

  .center-box1 {
    width: 98%;
    height: 100%;
    background: #011137 !important;
    /*border: 1px solid #27306b;*/
    border-radius: 4px;
    .put {
      width: 95%;
      margin: 10px;

      ::v-deep .el-input {
        width: 100%;
        height: 20px;
      }

      ::v-deep .el-input__inner {
        border: 2px solid #0264bf;
        background-color: #081a46;
        // margin: 10px;
      }
    }
      .demo-ruleForm{
          margin-top: 12px;
          ::v-deep .el-form-item__label{
              color: #fff;
          }
          ::v-deep .el-form-item__label{
              width: 100px !important;
          }
          ::v-deep .el-input--medium .el-input__inner{
              border-color: #27306b;
          }
      }
      .table {
          width: 95%;
          height: 260px;
          margin: 10px;
          margin-top: 20px;
          overflow: auto;

          ::v-deep .el-table__body-wrapper {
            &::-webkit-scrollbar {
              // 整个滚动条
              width: 0px; // 纵向滚动条的宽度
              background: rgba(71, 103, 182, 0.3);
              border: none;
            }

            &::-webkit-scrollbar-track {
              // 滚动条轨道
              border: none;
            }
          }

          .el-table {
            width: 100%;
          }

          ::v-deep .el-table th.gutter {
            display: none;
            width: 0
          }

          ::v-deep .el-table colgroup col[name='gutter'] {
            display: none;
            width: 0;
          }

          ::v-deep .el-table__body {
            width: 100%;
            // padding-left: 10px;
          }

          ::v-deep .el-table__body-wrapper {
            width: 100%;
            background-color: #081a46;

          }

          /*滚动条的宽度*/
          .commonScrollbarTable ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
            display: none;
            width: 0;
          }

          .scrollbarShow ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
            display: block;
            width: 0;
          }

          ::v-deep .el-table tr {
            background-color: #081a46;
            border: none;
            // height: 50px;
            width: 100%;
          }

          ::v-deep .el-table td {
            background-color: #081a46;
            border: none;
            width: 100%;
            // height: 50px;
          }

          // /* 表格内背景颜色 */
          ::v-deep .el-table th {
            //background-color:#081a46;
            border: none;
            width: 100%;
          }

          // 移入变色
          ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
            background-color: #222448;
          }
        }

        ::v-deep.el-progress-bar__inner {
          background-color: unset; // 将进度条默认的颜色给去除掉，若不生效就再加个!important
        }

        .table::-webkit-scrollbar {
          display: none;
          /*隐藏滚动条*/
        }

        .table-bottom {
              width: 98%;
              height: 170px;
              margin: 10px;
              // margin-top: 20px;
              overflow: auto;

              ::v-deep .el-table__body-wrapper {
              &::-webkit-scrollbar {
                  // 整个滚动条
                  width: 0px; // 纵向滚动条的宽度
                  background: rgba(71, 103, 182, 0.3);
                  border: none;
              }

              &::-webkit-scrollbar-track {
                  // 滚动条轨道
                  border: none;
              }
              }

              .el-table {
              width: 100%;

              }

              ::v-deep .el-table th.gutter {
              display: none;
              width: 0
              }

              ::v-deep .el-table colgroup col[name='gutter'] {
              display: none;
              width: 0;
              }

              ::v-deep .el-table__body {
              width: 100%;
              // padding-left: 10px;
              background-color: #081a46;

              }

              ::v-deep .el-table__body-wrapper {
              width: 100%;
              background-color: #081a46;
              }

              /*滚动条的宽度*/
              .commonScrollbarTable ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
              display: none;
              width: 0;
              }

              .scrollbarShow ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
              display: block;
              width: 0;
              }


              ::v-deep .el-table tr {
              // background-color: transparent;
              background-color: #081a46;
              border: none;
              // height: 50px;
              width: 100%;
              }

              ::v-deep .el-table td {
              background-color: #081a46;
              //background-color: trannt;
              border: none;
              width: 100%;
              // height: 50px;
              }

              // /* 表格内背景颜色 */
              ::v-deep .el-table th {
              background-color: transparent;
              border: none;
              width: 100%;
              }

              // 移入变色
              ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
              background-color: #222448;
              }
          }

      }
  }


//右边
.video-right {
  width: 80%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .videoBox {
    width: 98%;
    height: 100%;
    display: flex;
    flex-direction: column;
    //justify-content: center;
    align-items: center;
    border: 1px solid #27306b;
    border-radius: 4px;
    background: #011137 !important;

    .videobox1 {
      width: 99%;
      height: 70%;
      margin-bottom: 0.5%;

      .box {
        width: 100%;
        height: 95% !important;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #000000;
        border: 1px solid #00FF00;
        background-image: url(../../components/images/jiankong.png);
        background-repeat: no-repeat;
        background-position: center center;
      }

      .video-js {
        background-color: rgb(1 5 43);
        object-fit: fill;
        //隐藏video播放按钮
      }

      video {
        pointer-events: none;
      }

      //隐藏video播放按钮
      video::-webkit-media-controls-play-button {
        display: none !important;
      }

      //隐藏video音量进度条
      video::-webkit-media-controls-volume-slider {
        display: none !important;
      }

      //隐藏video音量按钮
      video::-webkit-media-controls-mute-button {
        display: none !important;
      }

      video::-webkit-media-controls-toggle-closed-captions-button {
        display: none !important;
      }

      //隐藏当前时间
      video::-webkit-media-controls-current-time-display {
        display: none !important;
      }

      //隐藏剩余时间
      video::-webkit-media-controls-time-remaining-display {
        display: none !important;
      }

      //隐藏进度条
      video::-webkit-media-controls-timeline {
        display: none !important;
      }

      //更多选项
      video::-internal-media-controls-overflow-button {
        display: none !important;
      }
    }

    .videobox3 {
      width: 100%;
      height: 30%;
      display: flex;
      border-top: 1px solid #262E63;
      //background-color: #00FF00;

      //云台
      .ytkz{
        width: 50%;
        margin-top: 1%;

        .videobox3-1 {
          width: 100%;
          height: 10%;
          //background-color: #108B8F;

          p {
            font-size: 15px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #EDEDED;
            margin-left: 2%;
          }

          span {
            display: block;
            margin-left: 2.5%;
            width: 54px;
            height: 2px;
            background: #4691FF;
          }
        }

        .videobox3-2 {
          width: 100%;
          height: 90%;
          display: flex;
          align-items: center;
          justify-content: space-around;
          //margin-top: 1%;
          //background-color: #0051ff;

          .ptz {
            position: relative;
            width: 244px;
            /* padding: 10px; */
            height: 200px;
            //background-color: aquamarine;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          .circle-left {
            width: 73px;
            height: 146px;
            /* border: 1px solid #fff; */
            border-radius: 0px 73px 73px 0px;
            position: absolute;
            right: 0;
            transform-origin: 0 50%;
          }

          .circle-right {
            width: 73px;
            height: 146px;
            /* border: 1px solid #fff; */
            border-radius: 73px 0px 0px 73px;
            position: absolute;
            right: 0;
            transform-origin: 100% 50%;
          }

          /* 八等份分割线 */
          #Canvas {
            position: absolute;
            z-index: 1;
            pointer-events: none;
            left: 87px;
            top: 27px;
            transform: rotate(-22.5deg);
          }

          /* 外圆环 */
          #round {
            width: 160px;
            height: 160px;
            background-color: #011137;
            border-radius: 50%;
            position: absolute;
            left: 40px;
            top: 16px;
            z-index: 0;
          }

          /* 黑色内圆环 */
          #center_black {
            width: 74px;
            height: 74px;
            background-color: #011137;
            border-radius: 50%;
            position: absolute;
            left: 83px;
            top: 63px;
            z-index: 1;
          }

          /* 中心蓝色圆环 */
          #center_blue {
            width: 60px;
            height: 60px;
            text-align: center;
            background: linear-gradient(68deg, #3040F4, #3F79F4);
            border-radius: 50%;
            position: absolute;
            left: 90px;
            top: 70px;
            z-index: 2;
          }

          #center_blue span {
            position: absolute;
            left: 17px;
            top: 22px;
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ededed;
          }

          /* 圆八等份 */
          #circle0 {
            width: 146px;
            height: 146px;
            border-radius: 73px;
            top: 0px;
            background-color: #0f2140;
            position: absolute;
            left: 47px;
            top: 27px;
            z-index: 0;
            pointer-events: auto;
            transform: rotate(-22.5deg);
          }

          #left {
            /* 用矩形切割半圆 */
            clip: rect(0px 73px 146px 0px);
            position: absolute;
            right: 0px;
            width: 73px;
            height: 146px;
            overflow: hidden;
            border-left: 2px solid #011137;
          }

          #right {
            clip: rect(0px 78px 146px 0px);
            position: absolute;
            left: 0px;
            width: 73px;
            height: 146px;
            overflow: hidden;
            //border-right: 2px solid #011137;
          }

          #circle2:hover,
          #circle3:hover,
          #circle4:hover,
          #circle5:hover,
          #circle6:hover,
          #circle7:hover,
          #circle8:hover,
          #circle9:hover,
          #center_blue:hover {
            cursor: pointer;
          }

          #circle2 {
            background-color: #0a2056;
            //border-left: 2px solid #011137;
          }

          #circle2 span {
            position: absolute;
            left: 14px;
            top: 15px;
            transform: rotate(22.5deg);
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ededed;
          }

          #circle3 {
            background-color: #0a2056;
            transform: rotate(45deg);
            border-left: 2px solid #011137;
          }

          #circle3 span {
            position: absolute;
            left: 10px;
            top: 15px;
            transform: rotate(22.5deg);
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ededed;
          }

          #circle4 {
            background-color: #0a2056;
            transform: rotate(90deg);
            border-left: 2px solid #011137;
          }

          #circle4 span {
            position: absolute;
            left: 15px;
            top: 15px;
            transform: rotate(22.5deg);
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ededed;
          }

          #circle5 {
            background-color: #0a2056;
            transform: rotate(135deg);
            border-left: 2px solid #011137;
          }

          #circle5 span {
            position: absolute;
            left: 12px;
            top: 15px;
            transform: rotate(22.5deg);
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ededed;
          }

          #circle6 {
            background-color: #0a2056;
            transform: rotate(225deg);
            border-right: 2px solid #011137;
          }

          #circle6 span {
            position: absolute;
            right: 14px;
            top: 15px;
            transform: rotate(-22.5deg);
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ededed;
          }

          #circle7 {
            background-color: #0a2056;
            transform: rotate(270deg);
            border-right: 2px solid #011137;
          }

          #circle7 span {
            position: absolute;
            right: 10px;
            top: 15px;
            transform: rotate(-22.5deg);
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ededed;
          }

          #circle8 {
            background-color: #0a2056;
            transform: rotate(315deg);
            border-right: 2px solid #011137;
          }

          #circle8 span {
            position: absolute;
            right: 15px;
            top: 15px;
            transform: rotate(-22.5deg);
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ededed;
          }

          #circle9 {
            background-color: #0a2056;
            transform: rotate(360deg);
          }

          #circle9 span {
            position: absolute;
            right: 10px;
            top: 15px;
            transform: rotate(-22.5deg);
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ededed;
          }

          .videobox3-3 {
            width: 40%;
            height: 80%;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 1%;
            // margin-left: -20%;
            justify-content: space-around;

            //background-color: #00FF00;
            .videobox3-3-1 {
              width: 90%;
              display: flex;
              justify-content: space-around;
              align-items: center;

              .btn1 {
                width: 32px;
                height: 32px;
                background: linear-gradient(68deg, #3040F4, #3F79F4);
                border-radius: 50%;
                border: none;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #EDEDED;
                cursor: pointer;
                margin-bottom: 4px;
              }

              p {
                width: 26px;
                height: 18px;
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #EDEDED;
                margin-bottom: 4px;
              }

              .btn2 {
                width: 32px;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 32px;
                background: linear-gradient(68deg, #3040F4, #3F79F4);
                border-radius: 50%;
                border: none;
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #EDEDED;
                cursor: pointer;
                margin-bottom: 4px;
              }
            }
          }
        }
      }
      //音频视频控制
      .ypkz{
        width: 50%;
        margin-top: 1%;
        //background-color:hotpink;
        .yspkz{
          width: 95%;
          height: 10%;
          margin-left: 5%;
          //margin-bottom: 2%;
          //background-color: #00FF00;
          p {
            font-size: 15px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #EDEDED;
            margin-left: 3%;
          }

          span {
            display: block;
            margin-left: 3.5%;
            width: 52px;
            height: 2px;
            background: #4691FF;
          }
        }
        .btnBox{
          width: 100%;
          height: 90%;
          display: flex;
          //background-color: #54619D;

          .btnBox1{
            width: 36%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          // background-color: #00FF00;

            .btn {
              width: 60px;
              height: 25px;
              background: linear-gradient(0deg, #0D1538, #1B2D67);
              border: 2px solid #2B5B9B;
              border-radius: 4px;
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #EDEDED;
              display: flex;
              justify-content: center;
              align-items: center;
            }

            >P {
              width: 60px;
              height: 25px;
              margin-top: 20%;
              display: flex;
              justify-content: center;
              align-items: center;
              background: #0F1A43;
              border: 2px solid #54619D;
              border-radius: 10px;
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #C1C1C1;
            }
          }
          .btnBox2{
            width: 30%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            //background-color: #00FF00;
            .btn1 {
              width: 60px;
              height: 25px;
              //margin-top: 5%;
              display: flex;
              justify-content: center;
              align-items: center;
              background: linear-gradient(0deg, #4C0820, #0D1538);
              border: 2px solid #942028;
              border-radius: 4px;
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #EDEDED;
              /*margin-bottom: 5%;*/
            }

            .btn2 {
              width: 60px;
              height: 25px;
              margin-top: 20%;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #EDEDED;
              background: linear-gradient(0deg, #0D1538, #1B2D67);
              border: 2px solid #2B5B9B;
              border-radius: 4px;
            }

            .btn3 {
              width: 90px;
              height: 25px;
              // margin-top: 27%;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #EDEDED;
              background: linear-gradient(0deg, #0D1538, #1B2D67);
              border: 2px solid #2B5B9B;
              border-radius: 4px;
              margin-bottom: 5%;
            }
          }
          .btnBox3{
            width: 30%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          // background-color: #0051ff;

            .btn1 {
              width: 60px;
              height: 25px;
              //margin-top: 5%;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #EDEDED;
              background: linear-gradient(0deg, #0D1538, #1B2D67);
              border: 2px solid #2B5B9B;
              border-radius: 4px;
            }

            .btn2 {
              width: 60px;
              height: 25px;
              margin-top: 20%;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #EDEDED;
              background: linear-gradient(0deg, #0D1538, #673B1B);
              border: 2px solid #9B6D2B;
              border-radius: 4px;
            }
          }
          .btnBox4{
            width: 30%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            // background-color: #0051ff;

            .btn1 {
              width: 60px;
              height: 25px;
              //margin-top: 5%;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #EDEDED;
              background: linear-gradient(0deg, #0D1538, #1B2D67);
              border: 2px solid #2B5B9B;
              border-radius: 4px;
            }

            .btn2 {
              width: 60px;
              height: 25px;
              margin-top: 20%;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #EDEDED;
              background: linear-gradient(0deg, #0D1538, #673B1B);
              border: 2px solid #9B6D2B;
              border-radius: 4px;
            }
          }
        }
      }

    }

  }
}
</style>
